<template>
	<div class="page pageBackground">
		<custom-box back title="积分商城">
			<div class="ishop_tab flex j-center">
				<div class="item" :class="{'on':active==0}" @click="tab(0)">1-100</div>
				<div class="item" :class="{'on':active==1}" @click="tab(1)">101-1000</div>
				<div class="item" :class="{'on':active==2}" @click="tab(2)">1001-5000</div>
				<div class="item" :class="{'on':active==3}" @click="tab(3)">5000以上</div>
			</div>
			
			<div class="ishop_body">
				<swiper-box @change="swiperChange" ref="swiper">
					<swiper-item>
						<div class="scroll">
							<div class="item" v-for="(item) in giftList" @click="handleDetail(item)">
								<div class="image">
									<img :src="item.avatar">
									<div class="price">{{item.unit}}积分</div>
								</div>
								<div class="text">{{item.name}}</div>
							</div>
						</div>
					</swiper-item>
					<!-- <swiper-item>
						<div class="scroll">
							<div class="item" v-for="i in 6" @click="showDetail = true">
								<div class="image"><img src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"><div class="price">80积分</div></div>
								<div class="text">塔克飞机积木</div>
							</div>
						</div>
					</swiper-item>
					<swiper-item>
						<div class="scroll">
							<div class="item" v-for="i in 4" @click="showDetail = true">
								<div class="image"><img src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"><div class="price">80积分</div></div>
								<div class="text">塔克飞机积木</div>
							</div>
						</div>
					</swiper-item>
					<swiper-item>
						<div class="scroll">
							<div class="item" v-for="i in 10" @click="showDetail = true">
								<div class="image"><img src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"><div class="price">80000积分</div></div>
								<div class="text">塔克飞机积木</div>
							</div>
						</div>
					</swiper-item> -->
				</swiper-box>				
			</div>
		</custom-box>
		
		<ishop-detail v-if="showDetail" :itemDetails="itemDetails" @next="nextDetail" @close="close"></ishop-detail><!--商品详情-->
		<ishop-exchange :itemDetails="itemDetails" v-if="showExchange" type="success" @close="close"></ishop-exchange>
	</div>
</template>
<script>
import ishopDetail from './detail.vue';
import ishopExchange from './exchange.vue';

import { getPresent } from '../../api/modules/present';

export default {
	components:{ishopDetail,ishopExchange},
	data(){
		return {
			showDetail:false,
			showExchange:false,
			active:0,
			giftList: [], // 礼物选中的数据
			static_uri: getApp().globalData.glb_list.config.static_uri, // 获取全局配置文件
			glbId: getApp().globalData.glb_list.glbId, // 获取全局的id
			itemDetails: {}, // 选中的详情
		}
	},
	mounted() {
		this._getPresent({ page_no: 1, page_size: 10000 });
	},
	methods:{
		handleDetail(params) {
			console.log('params', params)
			this.itemDetails = params
			this.showDetail = true
		},
		swiperChange(i){
			this.active = i
		},
		tab(i){
			var swiper = this.$refs['swiper'];
			this.active = i
			swiper.slideTo(i)			
			if ( i === 0 ) {
				this.giftList = this.totalGiftList.filter(i => i.price_score <= 100 && i.price_score >= 1);
			} else if (i === 1) {
				this.giftList = this.totalGiftList.filter(i => i.price_score <= 1000 &&  i.price_score >=101);
			} else if (i === 2) {
				this.giftList = this.totalGiftList.filter(i => i.price_score <= 5000 && i.price_score >= 1001);
			}else if (i === 3) {
				this.giftList = this.totalGiftList.filter(i => i.price_score >= 5001);
			}
		},
		nextDetail(){
			this.showDetail = false
			this.showExchange = true
		},
		close(){
			this.showDetail = false
			this.showExchange = false
		},
		_getPresent(params) {
			getPresent(params).then(res => {
				const { code, data } = res || {}
				if ( code === 200) {
					let arr = data.list.map(i => ({...i, avatar: `${this.static_uri}${i.avatar}`})).filter(i => i.sid === this.glbId)

					this.giftList = arr.filter(i => i.price_score <= 100);
					this.totalGiftList = arr;

				}
			})
		}
	}
}
</script>
<style scoped lang="scss">
	.ishop_tab{
		width: 100%; line-height: .5rem;
		.item{font-size: .26rem; color: #313131; padding: 0px .3rem;}
		.item.on{color: #92603B; border-bottom: 2px solid #92603B;}
	}
	.ishop_body{
		height: calc(100% - 0.5rem); padding: 0 .2rem;
		.item{width: 2.38rem; height: 2.38rem; position: relative; float: left; margin-left: .3rem; margin-bottom: .1rem;}
		.item .image{
			width: 100%; height: 2.16rem; border-radius: 5px; overflow: hidden; position: relative;
			.price{position: absolute; right: 0; padding: 0 .2rem; line-height: .4rem; border-radius: .2rem 0 0 .2rem; background: rgba(255,255,255,0.68); top: .17rem; font-size: .2rem; color: #F84638; text-align: center;}
			img{width: 100%; height: 100%; object-fit: cover;}
		}
		.item .text{position: absolute; left: 50%; bottom: 0; z-index: 2; transform: translateX(-50%); width: 1.8rem; height: .42rem; border-radius: .21rem; border: 1px solid #46C3FF; background-color: #fff; text-align: center; font-size: .2rem; line-height: .42rem;}
	}
</style>